<div class="step-big" id="big_pic">
	<div class="step-go-back">
		<img src="{{ asset('/images/front/training/back.png') }}">
		<a href="javascript:void(0)" onclick="goBackStep()" >返回文档浏览</a>
	</div>
	<div class="step-content">
		<div class="step-switch float-l">
			<img src="{{ asset('/images/front/training/left.png') }}" style="margin-top:160px;cursor:pointer;" id="c_left">
		</div>
		<div  class="step-container float-l">
			<div class="step-container-title">
			    <span class="font-1" id="curNum">1</span>
			    <span class="font-2" id="allcount">/{{ $allcount }}</span>
			</div>
			<div class="step-container-info">
			    <ul id="pic">
			        @if(!empty($result->content) && $isnew==1)
			        @foreach($result->content as $fkey=>$firstcon) 
			            @foreach($firstcon['content'] as $k=>$contents)
		            <li class="step-inline-show clearfix">
						<div  class="step-infomation float-l">
							<p>{!!$contents['name']!!}</p>
						</div>
						<div class="step-img float-r">
						    @if(!empty($contents['img']))
                            @foreach($contents['img'] as $ck=>$conimg)
                            @if(count($contents['img']) == 2 )
                            <div  class="height-245 @if($ck == 1) mt-10 @endif">
                                <img src="{{ $conimg }}">
                            </div>
                            @elseif(count($contents['img']) > 2 )
                            <div  class="float-l mt-10 step-img height-245 ml-10">
                                <img src="{{ $conimg }}">
                            </div>
                            @else
                            <div>
                                <img src="{{ $conimg }}">
                            </div>
                            @endif
                            @endforeach
                            @endif
						</div>
						<div class="clearfix"></div>
					</li>
			            @endforeach
			        @endforeach
			        @else
			        @foreach($result->content as $key=>$contents)
					<li class="step-inline-show">
						<div  class="step-infomation float-l">
							<p>{!!$contents['name']!!}</p>
						</div>
						<div class="step-img float-r">
						    @if(!empty($contents['img']))
                            @foreach($contents['img'] as $ck=>$conimg)
                           @if(count($contents['img']) == 2 )
                            <div class="height-245 @if($ck == 1) mt-10 @endif">
                                <img src="{{ $conimg }}">
                            </div>
                            @elseif(count($contents['img']) > 2 )
                            <div  class="float-l mt-10 step-img height-245 ml-10">
                                <img src="{{ $conimg }}">
                            </div>
                            @else
                            <div>
                                <img src="{{ $conimg }}">
                            </div>
                            @endif
                            @endforeach
                            @endif
						</div>
						<div class="clearfix"></div>
					</li>
					@endforeach
					@endif
				</ul>
			</div>
			<div class="step-footer">
				<ul id="num_cg">
				    @if(!empty($result->content) && $isnew==1)
			        @foreach($result->content as $ftkey=>$ftcon) 
			        @if(count($result->content) > 1)
			        <li class="roman">@if($ftkey==0) I @elseif($ftkey==1) II @elseif($ftkey==2) III @elseif($ftkey==3) IV @elseif($ftkey==4) V @endif</li>
			        @endif
			        @foreach($ftcon['content'] as $ctkey=>$cts)
					 <li class="step-inline-show" >{{$ctkey+1}}</li>
					@endforeach
					@endforeach
					@else
					@foreach($result->content as $key=>$contents)
					<li class="step-inline-show" >{{$key+1}}</li>
					@endforeach
					@endif
				</ul>
			</div>
		</div>
		<div  class="step-switch float-r">
			<img src="{{ asset('/images/front/training/right.png') }}"  id="c_right">
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	var stepNum = $('#pic').find('li.step-inline-show');
	var stepNumFoor = $('#num_cg').find('li.step-inline-show');
	stepNum.first().show();
	stepNumFoor.first().addClass('selected');
	$('#allcount').html("／"+stepNumFoor.length);
	stepNumFoor.hover(function(){
		$("#curNum").text($(this).text());
		stepNumFoor.removeClass('selected');
		$(this).addClass('selected');
		$("#pic > li.step-inline-show").hide().eq(stepNumFoor.index(this)).show(); 
// 		$(this).addClass("selected").siblings().removeClass();//removeClass就是删除当前其他类；只有当前对象有addClass("selected")；siblings()意思就是当前对象的同级元素，removeClass就是删除； 
	});
	$('#num_cg li.step-inline-show').click(function(){
		$("#curNum").text($(this).text());
		stepNumFoor.removeClass('selected');
		$(this).addClass("selected");
		$("#pic > li").hide().eq(stepNumFoor.index(this)).show(); 
	});
	$('#c_left').click(function(){
		var numNav=$("#num_cg").find("li.selected");
		stepNumFoor.removeClass("selected");
		stepNum.hide();
		if(numNav.prev().length==0 || numNav.prev().prev().length == 0){
			stepNumFoor.last().addClass("selected");
			stepNum.last().show();
			var nowCurr= $("#num_cg").find("li.selected");
			$("#curNum").text(nowCurr.text());
		}else if(numNav.prev().hasClass('step-inline-show')){
			numNav.prev().addClass("selected");
			var nowCurr= $("#num_cg").find("li.selected");
			$("#pic > li").hide().eq(stepNumFoor.index(nowCurr)).show(); 
			$("#curNum").text(nowCurr.text());
		}else{
			numNav.prev().prev().addClass("selected");
			var nowCurr= $("#num_cg").find("li.selected");
			$("#pic > li").hide().eq(stepNumFoor.index(nowCurr)).show();
			$("#curNum").text(nowCurr.text());
		}
	});
	$('#c_right').click(function(){
		var numNav=$("#num_cg").find("li.selected");
		stepNumFoor.removeClass("selected");
		stepNum.hide();
		if(numNav.next().length==0){
			stepNumFoor.first().addClass("selected");
			stepNum.first().show();
			var nowCurr= $("#num_cg").find("li.selected");
			$("#curNum").text(nowCurr.text());
		}else if(numNav.next().hasClass('step-inline-show')){
			numNav.next().addClass("selected");
			var nowCurr= $("#num_cg").find("li.selected");
			$("#pic > li").hide().eq(stepNumFoor.index(nowCurr)).show(); 
			$("#curNum").text(nowCurr.text());
		}else{
			numNav.next().next().addClass("selected");
			var nowCurr= $("#num_cg").find("li.selected");
			$("#pic > li").hide().eq(stepNumFoor.index(nowCurr)).show();
			$("#curNum").text(nowCurr.text());
		}
	});
})
</script>